/**
 * 客户订货系统，属于杭州升鲜宝科技有限公司，由升鲜宝团队开发
 * 主要特点：不同的客户登录，显示不同的商品，不同的商品价格
 * 内置了简易的进销存系统，方便升鲜宝的客户的客户进行简易的出库、入库、盘点、报损、库存查询
 * 升鲜宝供应商管理系统，全套系统授权源代码使用。方便有一定开发能力的公司与团队进行快速的供应链管理系统开发与应用
 * 联系方式：微信 13858022914  
 * 联系人： 余东升
 * 手机号码： 15382353715
 * 
 */
<template>
  <view class="title" v-if="props.title">
    {{ props.title }}
  </view>
  <view class="initRadio">
    <view
      class="item"
      :style="props.customStyle"
      @click="() => handleClick(item)"
      :class="props.modelValue === item.value && 'active'"
      v-for="(item, idx) in props.list"
      :key="idx"
      >{{ item.name }}</view
    >
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    require: true,
    default() {
      return [];
    },
  },
  modelValue: {
    default: "",
  },
  customStyle: {
    type: Object,
    defautl() {
      return {};
    },
  },
});

const emits = defineEmits(["change", "update:modelValue"]);

const handleClick = (item) => {
  emits("change", item);
  emits("update:modelValue", item.value);
};
</script>

<style lang="scss">
.title {
  font-size: 10px;
  color: #a7a7b0;
  line-height: 14px;
  margin-bottom: 8px;
}

.initRadio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;

  .item {
    height: 18px;
    padding: 0 10px;
    line-height: 18px;
    border-radius: 9px;
    border: 1px solid #cecece;
    background-color: #fff;
    color: #5b5b5b;
    font-size: 10px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 10px;
    &.active {
      background-color: rgba(253, 77, 0, 1);
      border-color: rgba(253, 77, 0, 1);
      color: #fff;
    }
  }
}
</style>
